<template>
	<div>
		<el-scrollbar :height="type === 'org' ? `calc(100vh - 116px)` : `calc(100vh - 160px)`">
			<zh-space>
				<zh-card title="">
					<zh-form ref="queryForm" :model="state.queryUserParam">
						<zh-form-select
							v-model="state.queryUserParam.searchType"
							label="查询类型"
							:options="state.searchTypeData"
							prop="searchType"
							placeholder="默认查询未授权用户"
							@change="searchTypeChange"
						>
						</zh-form-select>
						<zh-form-input label="姓名" v-model="state.queryUserParam.fullName" prop="fullName" placeholder="支持模糊查询" />
						<template v-if="state.advanced">
							<zh-form-input label="用户名" v-model="state.queryUserParam.userName" prop="userName" placeholder="支持模糊查询" />
							<zh-form-select placeholder="请搜索，支持多选"
                prop="orgIds"
                funcCode="org0001"
                label="所属组织"
                searchField="orgName"
                :fieldNames="{
                  label: 'orgName',
                  value: 'orgId',
                }"
                :lazy="true"
                mode="multiple"
                v-model="state.queryUserParam.orgIds">
              </zh-form-select>
							<zh-form-select
								prop="status"
								label="状态"
								placeholder="单选"
								:options="state.statusData"
								v-model="state.queryUserParam.status"
							></zh-form-select>
							<zh-form-select
								prop="userTypeList"
								label="用户类型"
								v-model="state.queryUserParam.userTypeList"
								mode="multiple"
								placeholder="支持多选"
								:options="state.dictData.userType"
							>
							</zh-form-select>
						</template>
						<zh-form-query v-model="state.advanced" :formRef="queryForm" :queryParam="state.queryUserParam" :tableRef="userListTable"></zh-form-query>
					</zh-form>
				</zh-card>
				<zh-table
					ref="userListTable"
					:columns="state.userColumn"
					:funcCode="state.funcCode"
					:disabled="false"
					highlight-current-row
					:loading="state.userLoading"
					:checkbox-config="{ trigger: 'row' }"
				>
					<template #status_default="{ row }">
						<zh-badge :status="statusMap[row.status].status" :text="statusMap[row.status].text" />
					</template>
				</zh-table>
			</zh-space>
		</el-scrollbar>
	</div>
</template>

<script lang="ts" setup name="AddUserModule">
const statusMap = {
	0: {
		status: 'error',
		text: '禁用',
	},
	1: {
		status: 'processing',
		text: '启用',
	},
};
const props = defineProps({
	id: {
		type: String,
	},
	type: {
		type: String,
	},
});

const queryForm = ref();
const userListTable = ref();
const state = reactive({
	description: '授权用户界面',
	// 高级搜索 展开/关闭
	advanced: false,
	dictData: {} as any,
	orgSelectTreeValue: undefined,
	userChecked: [] as any[],
	// 用户查询条件
	queryUserParam: { searchType: '1',userTypeList:[] } as any,
	searchTypeData: [
		{ dictKey: '1', dictValue: '从未授权用户' },
		{ dictKey: '2', dictValue: '已授权用户' },
		{ dictKey: '3', dictValue: '全部' },
	],
	statusData: [
		{ dictKey: '1', dictValue: '启用' },
		{ dictKey: '0', dictValue: '禁用' },
	],
	// 用户列表参数
	userTableData: [],
	userLoading: false,
	funcCode: '',
	userColumn: [
		{ type: 'checkbox', width: 50, fixed: 'left' },
		{ type: 'seq', width: 50, fixed: 'left', align: 'center', title: '序号' },
		{ field: 'userId', title: '用户Id', visible: false, fixed: 'left', align: 'center', width: 150 },
		{ field: 'userName', title: '用户名', fixed: 'left', align: 'center', width: 150 },
		{ field: 'fullName', title: '姓名', align: 'center', width: 150 },
		{ field: 'userType', title: '用户类型key', visible: false, align: 'center', width: 150 },
		{ field: 'userTypeName', title: '用户类型', align: 'center', width: 150 },
		{
			field: 'status',
			title: '状态',
			align: 'center',
			width: 80,
			slots: {
				default: 'status_default',
			},
		},
		{ field: 'email', title: '电子邮箱', align: 'center', showOverflow: true, width: 150 },
		{ field: 'cellphone', title: '手机', align: 'center', width: 150 },
		{ field: 'idcard', title: '身份证', align: 'center', width: 150 },
		{ field: 'address', title: '地址', align: 'center', showOverflow: true, width: 200 },
		{ field: 'officePhone', title: '办公室电话', align: 'center', width: 100 },
		{ field: 'shortPhone', title: '短号', align: 'center', width: 60 },
		{ field: 'orgId', title: '所属组织', align: 'center', showOverflow: true, width: 150 },
		{ field: 'orgName', title: '所属组织', align: 'center', showOverflow: true, width: 150 },
		{ field: 'superiorsName', title: '直接上级', align: 'center', width: 150 },
		{ field: 'regdate', title: '创建日期', align: 'center', width: 80 },
		{ field: 'remarks', title: '备注', align: 'center', showOverflow: true, width: 250 },
	],
});

function findUserList() {
	userListTable.value.query(state.queryUserParam);
}
function getCheckedUserIds() {
	const users = userListTable.value.getAllCheckboxRecords();
	if (users) {
		if (users.length <= 0) {
			$messageBox.warning('请先勾选需要授权的用户', '提示');
			return false;
		}
	} else {
		$messageBox.warning('请先勾选需要授权的用户', '提示');
		return false;
	}
	const userIds: string[] = [];
	users.forEach((item) => {
		userIds.push(item.userId);
	});
	return userIds;
}
function searchTypeChange() {
	findUserList();
}
const params = {
	dictFields: 'userType',
};
$api.common.getBatchDict.post(params).then((res) => {
	state.dictData = res.result;
});
onBeforeMount(() => {
	if (props.id) {
		if (props.type === 'org') {
			state.queryUserParam.orgId = props.id;
			state.funcCode = 'org0015';
		} else if (props.type === 'router') {
			state.queryUserParam.routerId = props.id;
			state.funcCode = 'router0018';
		}else if(props.type === 'menu'){
			state.queryUserParam.menuId = props.id;
			state.funcCode = 'appmenu0017';
		}
	}
});
onMounted(() => {
  nextTick(()=>{
    findUserList();
  })
});
defineExpose({ getCheckedUserIds });
</script>
